<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="swiper-3.4.2.min.css">
		<style>
			.swiper-container,.swiper-wrapper{
				width:500px;
				height:300px;
				background:yellow;
				border:1px solid greenyellow;
			}
			
		</style>
	</head>
	<body>
		
    	<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">Slide 1</div>
		        <div class="swiper-slide">Slide 2</div>
		        <div class="swiper-slide">Slide 3</div>
		    </div> 
		    
		     
			<div class="swiper-pagination"></div>
	 			
			<!-- 如果需要导航按钮 -->
			    <div class="swiper-button-prev">1</div>
			    <div class="swiper-button-next">2</div>
			    

		</div>			    
			    
			<script src="jquery-1.11.3.js"></script>
			<script src="swiper-3.4.2.jquery.min.js"></script>
		    <script>   
		    
			  var mySwiper = new Swiper ('.swiper-container', {
//		        direction: 'vertical',
		        autoplay: 1000,
			    loop: true,
			                                
			   // 如果需要分页器
			    pagination: '.swiper-pagination',
			    
			    // 如果需要前进后退按钮
			    nextButton: '.swiper-button-next',
			    prevButton: '.swiper-button-prev'
			    

			    
			    })         
  			</script>
	</body>
</html>
